<template>
  <div class="setting-page">
    <el-tabs v-model="activeName" type="card" class="setting-tabs">
      <el-tab-pane label="个人设置" name="first">
        <PersonSetting />
      </el-tab-pane>
      <el-tab-pane label="班级设置" name="second">
        <!-- <el-tab-pane label="班级设置" name="second" v-if="userPinia.user.subject"> -->
        <ClassSetting />
      </el-tab-pane>
      <el-tab-pane label="管理员设置" name="third">
        <!-- <el-tab-pane label="管理员设置" name="third" v-if="!userPinia.user.EditeScore"> -->
        <AdminSetting />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";
import PersonSetting from "./components/PersonSetting.vue";
import ClassSetting from "./components/ClassSetting.vue";
import AdminSetting from "./components/AdminSetting.vue";

const activeName = ref("first");
</script>
<style scoped>
.setting-page {
  width: 100%;
  height: 100%;
}

.setting-tabs {
  width: 100%;
  height: 100%;
}

.setting-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
